<template>
  <div class="home">
    <!-- 大导向 -->
    <van-grid class="big" @click="toBig">
      <van-grid-item text="儿童疫苗" class="word">
        <template #icon>
          <span class="iconfont icon-ertongpiao text1"></span>
        </template>
      </van-grid-item>
      <van-grid-item text="成人疫苗" class="word">
        <template #icon>
          <span class="iconfont icon-shouye2 text2"></span>
        </template>
      </van-grid-item>
      <van-grid-item text="在线问诊" class="word">
        <template #icon>
          <span class="iconfont icon-shouye text3"></span>
        </template>
      </van-grid-item>
      <van-grid-item text="自营药房" class="word">
        <template #icon>
          <span class="iconfont icon-yaodian text4"></span>
        </template>
      </van-grid-item>
    </van-grid>
    <!-- 小导向 -->
    <van-grid :column-num="5" class="small" @click="toSmall">
      <van-grid-item text="预约挂号">
        <template #icon>
          <span class="iconfont icon-a-zaixianguahao2x"></span>
        </template>
      </van-grid-item>
      <van-grid-item text="预约体检">
        <template #icon>
          <span class="iconfont icon-tijianbaogao"></span>
        </template>
      </van-grid-item>
      <van-grid-item text="口腔检查">
        <template #icon>
          <span class="iconfont icon-kouqiangke"></span>
        </template>
      </van-grid-item>
      <van-grid-item text="免费疫苗">
        <template #icon>
          <span class="iconfont icon-yimiaojilu"></span>
        </template>
      </van-grid-item>
      <van-grid-item text="看专家">
        <template #icon>
          <span class="iconfont icon-zhuanjia"></span>
        </template>
      </van-grid-item>
    </van-grid>

    <!-- 轮播 -->
    <van-swipe
      class="my-swipe"
      :autoplay="3000"
      indicator-color="white"
      @click="toEmpty"
    >
      <van-swipe-item>
        <template #default>
          <div class="content">
            <div class="text1">9价HPV疫苗扩龄现货专区</div>
            <div class="text2">告别超龄焦虑9~45岁女性接种GO</div>
          </div>
          <img src="../../assets/imgs/九价.jpg" class="img" />
        </template>
      </van-swipe-item>
      <van-swipe-item>
        <template #default>
          <div class="content">
            <div class="text1">甲流和诺如病毒高发</div>
            <div class="text2">三甲医生60秒接诊GO</div>
          </div>
          <img src="../../assets/imgs/doctor.jpg" class="img" />
        </template>
      </van-swipe-item>
      <van-swipe-item>
        <template #default>
          <div class="content">
            <div class="text1">国产带状疱疹疫苗获批上市</div>
            <div class="text2">全球首款40岁+适用仅需—针GO</div>
          </div>
          <img src="../../assets/imgs/疫苗.jpg" class="img" />
        </template>
      </van-swipe-item>
    </van-swipe>

    <!-- 疫苗助手 -->
    <div class="assist">
      <div class="up">
        <div class="text">疫苗助手</div>
        <span>当前建议接种</span>
      </div>
      <div class="down">
        <div class="left">
          <div>本地HPV疫苗</div>
          <span class="iconfont icon-kouqiangke"></span>
          <span>查看现货</span>
          <span>一键了解本地现货情况</span>
        </div>
        <div class="right" @click="handClick">去看看</div>
      </div>
    </div>

    <!-- 广告 -->
    <van-grid direction="horizontal" :column-num="2" :reverse="true" class="ad">
      <van-grid-item @click="handClick">
        <template #text>
          <span
            >HPV现货
            <div>15天内可预约</div></span
          >
        </template>
        <template #icon>
          <img src="../../assets/imgs/客服.jpg" class="img" />
        </template>
      </van-grid-item>

      <van-grid-item @click="handleClick">
        <template #text>
          <span
            >健康好药馆
            <div>营养保健3折起</div></span
          >
        </template>
        <template #icon>
          <img src="../../assets/imgs/药品.jpg" class="img" />
        </template>
      </van-grid-item>
    </van-grid>

    <!-- 精选名医 -->
    <div class="doctorHead">
      <van-nav-bar
        left-text="精选名医"
        left-arrow:false
        @click-right="handMore"
      >
        <template #right>
          <span>更多></span>
        </template>
      </van-nav-bar>
      <van-grid
        direction="horizontal"
        :column-num="2"
        class="doctor"
        :border="false"
      >
        <van-grid-item
          v-for="value in userArr.slice(0, 4)"
          :key="value.name"
          v-model="userArr"
          @click="toPersonal(value)"
        >
          <template #text>
            <div class="mingyi">
              <h6>{{ value.name }}<span>主任医师</span></h6>
              <div>{{ value.adept }}</div>
              <span class="iconfont icon-zhuanjia"
                >5<span>/&nbsp;消化内科</span></span
              >
            </div>
          </template>
          <template #icon>
            <img :src="value.url" />
          </template>
        </van-grid-item>
      </van-grid>

      <!-- 榜单 -->
      <div class="top">
        <div class="left">
          <span class="iconfont icon-biaoqiankuozhan_bangdan-348"></span
          >&nbsp;儿科<br />好医生榜单
        </div>
        <div>
          <span class="iconfont icon-biaoqiankuozhan_bangdan-348"></span
          >&nbsp;妇科<br />好医生榜单
        </div>
        <div class="right">
          <span class="iconfont icon-biaoqiankuozhan_bangdan-348"></span
          >&nbsp;皮肤科<br />好医生榜单
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted, onBeforeMount } from "vue";
import { useRouter } from "vue-router";
import { userhandle } from "../../api/userDoctor";

const router = useRouter();
let userArr = ref("");
// 加载分类数据
// 加载分类数据
const loadData = async () => {
  const result: any = await userhandle();
  console.log("所有分类:", result);
  userArr.value = result.list;
};
loadData();

// 点击上面大图标跳转到的页面
const toBig = () => {
  router.push("./big");
};

// 点击上面小图标跳转到的页面
const toSmall = () => {
  router.push("./small");
};

// 点击轮播图跳转到的页面
const toEmpty = () => {
  router.push("./empty");
};

//跳转到hpv详情页
const handClick = () => {
  router.push("./hpv");
};

//跳转到pharmacy详情页
const handleClick = () => {
  router.push("./pharmacy");
};

//加载更多医生信息
const handMore = () => {
  router.push("./people");
};

//医生详细信息
const toPersonal = async () => {
  router.push("./personal");
};
</script>

<style scoped lang='less'>
.home {
  height: 720px;
}
.big {
  padding-bottom: 10px;
  :deep(.van-grid-item) {
    padding-top: 10%;
  }
  :deep(.van-grid-item__content--center) {
    height: 70px;
    margin-top: -20px;
  }
  .iconfont {
    font-size: 35px;
  }
  .word {
    font-size: 28px;
    height: 30px;
    margin-bottom: 40px;
    margin-top: -20px;
  }
  .text1 {
    color: #39a9ed;
  }
  .text2 {
    color: #117552;
  }
  .text3 {
    color: #17abb0;
  }
  .text4 {
    color: #999b11;
  }
  :deep(.van-grid-item__text) {
    font-size: 13px;
    font-weight: 600;
  }
}

.small {
  .iconfont {
    color: rgb(99, 170, 83);
    font-size: 30px;
  }
}
.my-swipe {
  .content {
    float: left;
    margin-top: 25px;
    margin-left: 15px;
    .text1 {
      font-size: 15px;
      color: #117552;
      margin-bottom: 5px;
    }
    .text2 {
      font-size: 10px;
      color: #adb9b5;
    }
  }
  .img {
    width: 140px;
    height: 80px;
    margin-top: 6px;
  }
  .van-swipe-item {
    color: #272323;
    font-size: 20px;
    text-align: center;
    height: 90px;
  }
}

.assist {
  height: 90px;
  margin: 10px 0px;
  .up {
    margin-bottom: 10px;
    .text {
      height: 20px;
      font-size: 15px;
      font-weight: 600;
      float: left;
      margin-left: 15px;
      margin-right: 10px;
    }
    span {
      height: 20px;
      font-size: 13px;
      color: #adb9b5;
    }
  }
  .down {
    width: 350px;
    height: 60px;
    background-color: #91e0a9;
    border-radius: 10px;
    margin-left: 12px;
    margin-bottom: 5px;
    float: left;
    .left {
      width: 160px;
      margin-left: 15px;
      margin-top: 13px;
      float: left;
      :first-child {
        font-size: 13px;
        font-weight: 600;
        margin-right: 5px;
        float: left;
      }
      :nth-child(2) {
        font-size: 13px;
        margin-right: 2px;
      }
      :nth-child(3) {
        font-size: 13px;
        font-weight: 600;
        margin-right: 2px;
      }
      :nth-child(4) {
        font-size: 12px;
        margin-right: 2px;
      }
    }
    .right {
      width: 60px;
      height: 30px;
      font-size: 13px;
      float: left;
      background-color: #117552;
      border-radius: 30px;
      text-align: center;
      line-height: 30px;
      color: aliceblue;
      margin-top: 16px;
      margin-left: 90px;
    }
  }
}

.ad {
  margin-top: 13px;
  :deep(.van-grid-item__content) {
    background-color: #f6ebeb;
    border-radius: 5px;
    height: 62px;
  }
  img {
    width: 70px;
    height: 60px;
    margin-left: 10px;
  }
  span {
    font-size: 14px;
    font-weight: 600;

    div {
      font-size: 10px;
      font-weight: 300;
      margin-top: 6px;
    }
  }
}
.doctorHead {
  :deep(.van-nav-bar__text) {
    color: rgb(28, 27, 27);
    font-size: 15px;
    font-weight: 600;
  }

  :deep(.van-nav-bar__right) {
    font-size: 14px;
    color: #adb9b5;
  }
}
.doctor {
  :deep(.van-grid-item__content) {
    padding: 0px;
  }
  img {
    width: 40px;
    height: 40px;
    border-radius: 50%;
  }
  .mingyi {
    padding: 5px;
    margin-top: 2px;
    h6 {
      margin: 2px 0px;
      span {
        font-weight: 100;
        font-size: 8px;
        margin-left: 10px;
      }
    }
    div {
      width: 110px;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      font-size: 10px;
      color: #7d8481;
    }
    .iconfont {
      font-size: 5px;
      color: rgb(62, 171, 32);
      span {
        color: #adb9b5;
        margin-left: 7px;
        font-size: 5px;
      }
    }
  }
}

.top {
  .iconfont {
    color: #9fa121;
    font-size: 20px;
  }
  display: flex;
  justify-content: space-around;
  text-align: center;
  padding: 10px 15px;
  font-size: 15px;
  div {
    background-color: #ddf2f4;
    border-radius: 10px;
    width: 100px;
    height: 50px;
    line-height: 25px;
  }
}
</style>
